<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">

      window.onload = function (){
        //定义常量 图片的路径
        const path = "../pic/"
        //获取显示图片标签的Dom对象
        var pic = document.getElementById("pic");
        //设置全局变量 图片路径和图片名字
        var picSrc;
        var picName;

        //绑定第一张点击事件
        document.getElementById("first").onclick = function (){
          pic.setAttribute("src",path+"1.jpg");
        }

        //绑定最后一张点击事件
        document.getElementById("last").onclick = function (){
          pic.setAttribute("src",path+"7.jpg");
        }

        //绑定前一张点击事件
        document.getElementById("before").onclick = function (){
          //获取图片标签src属性
          picSrc = pic.getAttribute("src");
          //截掉路径部分和拓展名部门，只留文件名
          picName = parseInt(picSrc.substring(path.length,picSrc.lastIndexOf(".")));

          //判断是否已经是第一张图片
          if(picName != 1){
            pic.setAttribute("src",path+(picName-1)+".jpg");
          }else{
            alert("已经是第一张图片了");
          }
        }

        //绑定后一张点击事件
        document.getElementById("after").onclick = function (){
          picSrc = pic.getAttribute("src");
          picName = parseInt(picSrc.substring(path.length,picSrc.lastIndexOf(".")));
          //判断是否已经是最后一张图片
          if(picName < 7){
            pic.setAttribute("src",path+(picName+1)+".jpg");
          }else{
            alert("已经是最后一张图片了");
          }
        }
      }
    </script>
</head>
<body>

  <center>
    <br/><br/><br/><br/>
    <input type="button" value="第一张" id="first"/>
    <input type="button" value="前一张" id="before"/>
    <input type="button" value="后一张" id="after"/>
    <input type="button" value="最后一张" id="last"/>
    <br/><br/><br/><br/>

    <img id="pic" src="../pic/1.jpg" width="800px" height="500px">

  </center>

</body>
</html>